<template>
    <div class="chart-container">
        <div class="chart-title-wrapper">
            <div class="chart-title-block"></div>
            <div class="chart-title" style="opacity:1;">项目签约率</div>
            <div class="total-num">共{{progressArr.length}}个</div>
        </div>
        <div class="chart-content-wrapper">
            <div class="chart-content">
                <div v-for="(item,index) in progressArr" :key="'progress-'+index" class="progress-item-wrapper">
                    <div class="progress-item-title-wrapper">
                        <div class="progress-title">{{item.name}}</div>
                        <div class="progress-value">{{item.value}}%</div>
                    </div>
                    <div class="progress-content-wrapper">
                        <div :id="'progress-parent-'+index" :style="'width:'+item.value+'%;'">
                            <div v-if="item.show" :id="'progress-'+index" class="progress-content progress-move"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAreaProjectCompletion } from '@/api/index.js';
export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        },
        activeArea: {
            type: String
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        }
    },
    data() {
        return {
            progressArr:[]
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            setInterval(function(){
                _this.progressHide();
                setTimeout(function(){
                    _this.getTableData();
                },300);
            },300000);
        });
    },
    methods: {
        progressInit(){
            var progressArr=this.progressArr;
            for(var i=0;i<progressArr.length;i++){
                this.progressArr[i]["show"]=true;
            }
        },
        progressHide(){
            var progressArr=this.progressArr;
            for(var i=0;i<progressArr.length;i++){
                this.progressArr[i]["show"]=false;
            }
        },
        getTableData(){
            var _this=this;
            getAreaProjectCompletion({
                id:this.activeArea,
                year:this.year
            }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    _this.resetData(data);
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        resetData(arr){
            var newArr=[];
            for(var i=0;i<arr.length;i++){
                var item=arr[i];
                var val=parseFloat(item["value"]);
                item["value"]=val;
                item["show"]=false;
                newArr.push(item);
                if(i==arr.length-1){
                    this.progressArr=newArr;
                    this.progressInit();
                }
            }
        }
    }
}
</script>

<style scoped>
.chart-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.chart-content-wrapper{
    width:100%;
    flex:1;
    display: flex;
    flex-direction: column;
    height:0px;
}
.chart-content{
    width:100%;
    flex:1;
    height:0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:20px 20px 0px 32px;
    margin-bottom:45px;
    overflow-y:auto;
    overflow-x:hidden;
}
.chart-content::-webkit-scrollbar {
  width: 10px;
}
.chart-content::-webkit-scrollbar-track {
  background-color: #657180;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.chart-content::-webkit-scrollbar-thumb {
  background-color: #c3cbd6;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.progress-item-wrapper{
    margin-bottom:15px;
}
.chart-title-wrapper{
    width:97%;
    margin:0 auto;
    height:80px;
    display:flex;
    justify-content: space-between;
    position:relative
}
.chart-title-block{
    width: 255px;
    height: 38px;
    background: linear-gradient(90deg, #05FCFC 0%, #171B26 100%);
    opacity: 0.28;
    position:relative;
    left:30px;
    top:35px;
}
.chart-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F4F5;
    line-height: 33px;
    letter-spacing: 3px;
    position: absolute;
    top:36px;
    left:39px;
    white-space: nowrap;
}
.total-num{
    position:relative;
    top:38px;
    right:20px;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FBE173;
}
.progress-item-title-wrapper{
    display:flex;
    justify-content: space-between;
    margin-bottom:10px;
}
.progress-title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 22px;
    letter-spacing: 2px;
    /*-webkit-text-stroke: 1px #979797;
    text-stroke: 1px #979797;*/
}
.progress-content-wrapper{
    width:100%;
    height: 10px;
    background: #2A3D5E;
    opacity: 0.58;
    border-radius:5px;
}
.progress-content{
    width:100%;
    height: 10px;
    background: linear-gradient(90deg, #F3DD5A 0%, #55C7A9 53%, #10A9A9 100%);
    border-radius:5px;
    /*transition: all 2s ease;*/
}

@keyframes theanimation{ 
  from {width:0%;} 
  to {width:100%;} 
}

.progress-move{
    animation:theanimation 2s ease alternate; 
    -webkit-animation:theanimation 2s ease alternate ; 
    -moz-animation:theanimation 2s ease alternate ; 
    -o-animation:theanimation 2s ease alternate ; 
    -ms-animation:theanimation 2s ease alternate ; 
}

.progress-value{
    width: 50px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 20px;
}

</style>


